<template>
<div>
    <div class="banner" @click="handlcick">
       <img class="banner-img" :src="bannerImg" > 
       <div class="banner-info">
           <div class="banner-title">{{this.sightName}}</div>
           <div class="banner-number"> <span class="iconfont banner-ico">&#xe692;</span>{{this.gallaryImgs.length}}</div>
       </div>
    </div>
    <fata>
      <common :imgs="gallaryImgs" v-show="showgelly"
      @close="handlycolse"
      ></common>
    </fata>
    </div>
</template>
<script>
import common from 'commen/gelly/gelly.vue'
import fata from 'commen/fata/fata.vue'
export default {
    name:'DetailHeader',
    props:{
    sightName :String,
    bannerImg:String,
    gallaryImgs:Array,
 
    },
    data (){
    return {
        showgelly:false,
     imgs:['http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg','http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg']  
    }
    },
    components:{
        common,
           fata
    },
    methods :{
        handlycolse (){
         this.showgelly=false   
        },
handlcick (){
    this.showgelly=true
}
    }
}  
</script>
<style lang="stylus" scoped>
.banner
   position: relative 
   overflow: hidden
   height :0
   padding-bottom :55%
   .banner-img
       width :100%
   .banner-info
      display :flex
      position :absolute
      left :0
      right :0
      bottom :0
      line-height :.6rem
      color :#fff
      background-image :linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
      .banner-title
          flex :1
          font-size :.32rem
          padding :0 .2rem
      .banner-number
          margin-top :.14rem
          padding :0 .4rem
          line-height :.4rem
          height :.32rem
          line-height :.32rem
          border-radius :.2rem
          background:rgba(0,0,0,.8)
          font-size :.24rem
          .banner-ico
              font-size :.24rem
</style>


